<template>
  <div class="common-layout">

    <el-container direction="vertical">

<el-header style="background-color: rgb(64,158,254); height: 70px;">
    <div style="display: flex; justify-content: space-between; align-items: center; height: 100%;">
      <div style="display: flex; align-items: center;">
        <h1 style="color: white; display: flex; align-items: center; margin: 0;">
          <el-icon><Phone /></el-icon>
          东软环保公众监督平台管理系统
        </h1>
        <iframe style ="margin-left: 695px;" width="495" scrolling="no" height="25" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=1&color=%23FFFFFF&icon=1&py=hunnan&site=15"></iframe>
      </div>
      <div style="display: flex; align-items: center;">
        <h3 style="color: white; margin: 0;">
          系统管理员：{{ user.name }}
        </h3>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          :icon="WarningFilled"
          icon-color="orange"
          title="您是否想要退出登录?"
          @confirm="$router.push('/')"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button type="danger" style="margin-left: 20px;">退出登录</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
  </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#1A413D"
            :default-active="$route.path"
            :default-openeds="['1', '2', '3']"
            text-color="#fff"
            @open="handleOpen"
            class="menu"
            @close="handleClose"
            router
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><ChatLineRound /></el-icon>
                <span>公众监督数据管理</span>
              </template>
              <el-menu-item index="/supervisionData">公众监督数据列表</el-menu-item>
              <el-menu-item index="/griderConfirmData">确认AQI数据列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon><DocumentCopy /></el-icon>
                <span>统计数据管理</span>
              </template>
              <el-menu-item index="/provinceStatistics">省分组检查统计</el-menu-item>
              <el-menu-item index="/AQIDistributionStatistics">AQI指数分布统计</el-menu-item>
              <el-menu-item index="/AQIMonthStatistics">AQI指数趋势统计</el-menu-item>
              <el-menu-item index="/otherStatistics">其他数据统计</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3" v-if="user.manage_level==1">
              <template #title>
                <el-icon><Grid /></el-icon>
                <span>决策者数据管理</span>
              </template>
              <el-menu-item index="/homePageView" ><el-icon><View /></el-icon>数据大屏</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <el-main style="display: flex; position: relative; overflow: hidden; height: 100%;">
          <img src="@/assets/img/svg.png" alt="" style="position: absolute; top: 170px; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.5;">
          <RouterView />
        </el-main>

      </el-container>

      <el-footer style="background-color: rgb(64,158,254);">
        <h4 style="color: white; display: flex; align-items: center;margin-left: 40%">
          © 版权所有 2024 东软环保公众监督平台管理系统
        </h4>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { DocumentCopy, Grid, ChatLineRound, Phone,View,WarningFilled } from '@element-plus/icons-vue';

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
let user = reactive({})

function parseJWT(token) {
  // 分割JWT的三个部分
  let parts = token.split('.');
  let base64Url = parts[1];
  let rawData = atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')); // 替换URL安全的字符
  let decoder = new TextDecoder('utf-8');
  let payload = JSON.parse(decoder.decode(new Uint8Array(rawData.split('').map(c => c.charCodeAt(0)))));
  return payload;
}
let token = sessionStorage.getItem("token")
console.log(token)
user = parseJWT(token)
console.log(user)
console.log(parseJWT(token));

onMounted(() => {
  const script = document.createElement('script');
  script.type = "text/javascript";
  script.src = "https://cdn.bootcdn.net/ajax/libs/canvas-nest.js/2.0.4/canvas-nest.js";
  script.async = true;
  script.setAttribute('pointColor', '75,0,130');
  script.setAttribute('color', '216,191,216');
  script.setAttribute('opacity', '1'); 
  script.setAttribute('zIndex', '-1');
  script.setAttribute('count', '300'); 
  document.body.appendChild(script);
});
</script>

<style scoped>
.common-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-header {
  background: linear-gradient(90deg, rgb(26,65,61) 0%, rgb(0,160,118) 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.el-aside {
  background-color: #1A413D;
  box-shadow: inset -4px 0px 10px rgba(0, 0, 0, 0.1);
}

.el-button {
  transition: transform 0.3s ease-in-out;
}

.el-button:hover {
  transform: scale(1.1);
}

.el-menu-item:focus, .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}
.menu {
  border: none !important;
}

.el-footer {
  background: linear-gradient(90deg, rgb(26,65,61) 0%, rgb(0,160,118) 100%);
}
</style>
